<template>
  <view class="browse-view">
    <!-- tabbar -->
    <view class="tab-box">
      <view class="tab-item" :class="data.tabIndex == 0 ? 'tab-item-actived' : ''" @tap="changeTab(0)">
        <text class="tab-text">笔记</text>
      </view>
      <view class="tab-item" :class="data.tabIndex == 1 ? 'tab-item-actived' : ''" @tap="changeTab(1)">
        <text class="tab-text">资讯</text>
      </view>
    </view>	
    <swiper class="tab-swiper" :current="data.tabIndex" @change="changeTab($event.detail.current)">
      <!-- 关注 -->
       <swiper-item class="tab-swiper-item">
         <!-- 时间 -->
<!--         <view class="time-log">
           <text>{{data.noteTime}}</text>
         </view> -->
           <!-- 浏览记录 -->
           <scroll-view class="browse-note-view" scroll-y="true">
           <view class="waterfall">
             <!-- 笔记 -->
             <view class="flowList">
               <view class="note" v-for="idx in data.browseLeft" @click="showNote(data.browseList[idx].id,idx)">
                 <!-- 笔记封面 -->
                 <view class="note-img-box">
                   <image mode="widthFix" class="note-img" :src="data.browseList[idx].url"></image>
                 </view>
                 <!-- 笔记标题内容 -->
                 <view class="note-content-box">
                   <rich-text class="note-text">{{data.browseList[idx].title}}</rich-text>
                 </view>
                 <!-- 笔记作者信息和点赞情况 -->
                 <view class="note-info">
                   <view class="note-author-info">
                     <image class="author-avatar" :src="data.browseList[idx].authorAvatar"></image>
                     <text class="author-name">{{data.browseList[idx].authorName}}</text>
                   </view>
                   <view class="like-box" @click.stop="likeNote(idx)">
                     <image class="like-icon" v-if="data.browseList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                     <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                     <text class="like-num">{{data.browseList[idx].likeNum}}</text>
                   </view>
                 </view>
               </view>
             </view>
             <view class="flowList">
              <view class="note" v-for="idx in data.browseRight" @click="showNote(data.browseList[idx].id,idx)">
                <!-- 笔记封面 -->
                <view class="note-img-box">
                  <image mode="widthFix" class="note-img" :src="data.browseList[idx].url"></image>
                </view>
                <!-- 笔记标题内容 -->
                <view class="note-content-box">
                  <rich-text class="note-text">{{data.browseList[idx].title}}</rich-text>
                </view>
                <!-- 笔记作者信息和点赞情况 -->
                <view class="note-info">
                  <view class="note-author-info">
                    <image class="author-avatar" :src="data.browseList[idx].authorAvatar"></image>
                    <text class="author-name">{{data.browseList[idx].authorName}}</text>
                  </view>
                  <view class="like-box" @click.stop="likeNote(idx)">
                     <image class="like-icon" v-if="data.browseList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                     <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                     <text class="like-num">{{data.browseList[idx].likeNum}}</text>
                  </view>
                </view>
              </view>         
           </view>   
           </view>
           <view class="tip-tag" v-if="data.browseList.length >= data.browseTotal">
             暂无更多了
           </view>
         </scroll-view>
       </swiper-item>
       <!-- 资讯 -->
        <swiper-item class="tab-swiper-item">
          <!-- 时间 -->
<!--          <view class="time-log">
            <text>{{data.tripNewTime}}</text>
          </view> -->
         <scroll-view scroll-y="true" class="trip-new" lower-threshold="50" @scrolltolower="getMoreTripNew">
           <view class="trip-item" @click="showTripNew(item.id,index)" v-for="(item,index) in data.tripNewList" :key="index">
             <image mode="aspectFill" class="trip-img" :src="item.cover"></image>
             <view class="trip-des">
               <text class="trip-title">{{item.title}}</text>
               <text class="trip-road">{{item.departure}}->{{item.destination}}</text>
               <text class="trip-road">{{item.startTime}}->{{item.dayNum}}天</text>
               <view class="trip-info">
                 <view class="author-info">
                   <image class="trip-avatar" :src="item.authorAvatar"></image>
                   <text class="trip-name">{{item.authorName}}</text>
                 </view>
                 <view class="trip-like-box" @click.stop="likeTripNew(index)">
                   <image class="trip-like" v-if="item.like == 0 || item.like == null" src="../../static/img/like-btn1.png"></image>
                   <image class="trip-like" v-else src="../../static/img/like-btn2.png"></image>
                   <text class="trip-like-num">{{item.likeNum}}</text>
                 </view>
                 
               </view>
             </view>
           </view>
           <view class="tip-tag" v-if="data.tripNewList.length >= data.tripNewTotal">
             暂无更多了
           </view>
         </scroll-view>
       </swiper-item>    
    </swiper>
   
  </view>
</template>

<script setup>
import { reactive, ref,toRefs } from 'vue';
import { onShow,onLoad,onUnload } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'

const data = reactive({
  tabIndex:0,
  browseList:[],
  browseLeft:[],
  browseRight:[],
  browseLeftHeight: 0,
  browseRightHeight: 0,
  browseTotal: 0,
  browsePageNum: 0,
  browsePageSize: 10,
  tripNewList:[],
  tripNewTotal: 0,
  tripNewPageNum: 0,
  tripNewPageSize: 10,
});

// 修改tab页面
function changeTab(index){
  data.tabIndex = index
}

onLoad((options)=>{
  getBrowseNoteLog()
  getBrowseTripNewLog()
})

onShow(()=>{
  //监听页面返回的点赞事件
  updateLikeData()
})

onUnload((options)=>{
  uni.$off('like');  
})

function updateLikeData(){
  uni.$on('like',(likeData)=>{
    if(likeData.event != 6){
      return
    }
    //我的笔记或资讯
    if(data.tabIndex == 0){
      console.log("点赞事件:笔记"+likeData.index+" "+likeData.like)
      if(data.browseList[likeData.index].like < likeData.like){
        data.browseList[likeData.index].likeNum++
      }else if(data.browseList[likeData.index].like > likeData.like){
        data.browseList[likeData.index].likeNum--
      }
      data.browseList[likeData.index].like = likeData.like 
    }else{
      console.log("点赞事件:资讯"+likeData.index+" "+likeData.like)
      if(data.tripNewList[likeData.index].like < likeData.like){
        data.tripNewList[likeData.index].likeNum++
      }else if(data.tripNewList[likeData.index].like > likeData.like){
        data.tripNewList[likeData.index].likeNum--
      }
      data.tripNewList[likeData.index].like = likeData.like
    }
  })
}

// 查看笔记
function showNote(noteId,index){
  console.log(noteId)
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}&event=6`
  })
}

function showTripNew(tripNewId,index){
  console.log("查看资讯"+tripNewId)
  uni.navigateTo({
    url:`/subpages/tripNew/tripNew?tripNewId=${tripNewId}&index=${index}&event=6`
  })
}

function getBrowseNoteLog(){
  uni.request({
    url: helper.webUrl + "/note/getBrowseNoteLog",
    header:{
      "token": helper.getToken()
    },
    data: {
      pageNum: data.browsePageNum,
      pageSize: data.browsePageSize
    },
    success: (res) => {
      console.log(res.data);
      //处理笔记数据
      if(res.data.code == 200){
        let list = res.data.data.record
        data.browseTotal = res.data.data.total
        data.browsePageNum++
        for(let i = 0; i < list.length; i++){
          data.noteTime = helper.getDate(list[i].time)
          data.browseList.push(list[i])
          if(data.browseLeftHeight <= data.browseRightHeight){
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.browseLeftHeight += num + helper.noteBox
            data.browseLeft.push(data.browseList.length-1)
          }else{
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.browseRightHeight += num + helper.noteBox
            data.browseRight.push(data.browseList.length-1)
          }
        }
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getBrowseTripNewLog(){
  uni.request({
    url: helper.webUrl + "/tripNew/getBrowseTipNewLog",
    header:{
      "token": helper.getToken()
    },
    data: {
      pageNum: data.tripNewPageNum,
      pageSize: data.tripNewPageSize
    },
    success: (res) => {
      console.log(res.data);
      //处理笔记数据
      if(res.data.code == 200){
        let list = res.data.data.record
        data.tripNewTotal = res.data.data.total
        data.tripNewPageNum++
        for(let i = 0; i < list.length; i++){
          data.tripNewTime = helper.getDate(list[i].time)
          list[i].startTime = helper.getDate(list[i].startTime)
          data.tripNewList.push(list[i])
        }
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

// 点赞笔记
async function likeNote(idx){
  let noteId = data.browseList[idx].id
  if(data.browseList[idx].like > 0){
    let res = await helper.dislikeNoteReq(noteId)
    if(res.data.code == 200){
      data.browseList[idx].like = 0
      data.browseList[idx].likeNum--
    }
  }else{
    let res = await helper.likeNoteReq(noteId)
    if(res.data.code == 200){
      data.browseList[idx].like = 1
      data.browseList[idx].likeNum++
    }
  }
}

async function likeTripNew(index){
  let tripNewId = data.tripNewList[index].id
  if(data.tripNewList[index].like > 0){
    let res = await helper.dislikeTripNewReq(tripNewId)
    if(res.data.code == 200){
      data.tripNewList[index].like = 0
      data.tripNewList[index].likeNum--
    }
  }else{
    let res = await helper.likeTripNewReq(tripNewId)
    if(res.data.code == 200){
      data.tripNewList[index].like = 1
      data.tripNewList[index].likeNum++
    }
  }
}

</script>

<style>
.browse-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.tab-box{
  width: 100vw;
  display: flex;
  height: 7vh;
  background-color: #fff;
}
.tab-item{
  display: flex;
  align-items: center;
  padding-inline: 10px;
}
.tab-item-actived{
  border-bottom: 2px solid #89C0FF;
}
.tab-text{
  font-size: 20px;
  font-weight: bold;
}
.time-log{
  width: 100vw;
  height: 6vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: bold;
}
.tab-swiper{
  width: 100vw;
  height: 93vh;
}
.browse-note-view{
  width: 100vw;
  height: 87vh;
}
</style>
